class SubCategory extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            thumburl: '',
            name: '',
            id: '0',
            code: ''
        };
    }




    componentDidMount() {
        let categoryname = localStorage.getItem('categoryname'), categoryid = GetQueryString('id');
        console.log(categoryname, 'categoryname');
        this.setState({categoryid})

        if (categoryname.length > 0 && Number(categoryid) > 0) {
            this.setState({ categoryname, categoryid })
        } else {
            window.history.go(-1);
        }
        this.freshlist(categoryid);
    }

    freshlist(cid) {
        getsubcategorylist(cid, res => {
            if (res.issuccess == 1) {
                console.log(res.list);
                var listhtml = [];
                if(res.list.length>0){
                    res.list.forEach((x, i) => {
                        listhtml.push(
                            <tr key={i}>
                                <td>{x.name}</td>
                                <td>{x.picpath}</td>
                                <td>{x.code}</td>                     
                                <td className='operate'>
                                    <p onClick={this.del.bind(this, x.id,x.code)}>删除</p>
                                </td></tr>
                        )
                    });
                }else{
                    listhtml = ['无'] 
                }
              
                this.setState({ list: res.list, listhtml })
            }
        })
    }
    add() {
        this.setState({ clicknew: !0, id: '0' })
    }
    inputchange(e) {
        this.setState({ name: e.target.value })
    }
    inputcode(e) {
        this.setState({ code: e.target.value })
    }
    clickupload() {
        $('#file').click();
    }
   
   

    del_detail_img(){
        this.setState({finishupload:!1,thumburl:''})
    }
    filechange(e){
        var that = this;
      this.setState({
          finishupload:!1,
          uploadword:"上传"
        })
      var that = this;
      var filecode = this.state.filecode;
      console.log(filecode,'filecode');
      var filedata = $('#file')[0].files[0];
      
      var reader = new FileReader();
      reader.readAsDataURL(filedata);
      reader.onload= function (e) {
          var thumburl = e.target.result;
          that.setState({thumburl})
       //  that.putlistdata(filecode,[base64str])
          }
      }
      upload(){
        var that = this;
        var thumburl = this.state.thumburl;
        if(!isBase64(thumburl)){
            alert('请先选择图片')
            return;
        }
      uploadimg(thumburl,res=>{
          that.setState({
          finishupload:!0,
          thumburl:`${API_HEAD}imgs/${res.path}`
        })
      })
      
      }
    submit() {
        var { name, code,categoryid, thumburl, id } = this.state, err = '';
        
        
        
        if (name.length == 0) err = '请填写二级分类名称';
        if (code.length == 0) err = '请填写分类编码';
        if(thumburl.length == 0)err = "请上传分类图片";
        if (err.length > 0) {
            alert(err);
            return;
        }
        
        thumburl=thumburl.substring(thumburl.lastIndexOf("/")+1,thumburl.length);
        var src = thumburl;
        var data = { name, code,cid:categoryid,src };
       
        aodsubcategory(data, res => {
            if (res.issuccess == 1) {
                alert('添加成功')
                this.setState({
                    clicknew: !1,
                    name: '',
                    code: ''
                })
                this.freshlist(categoryid);
            }
        })
    }
    // edit(e) {
    //     var list = this.state.list;
    //     var item = {};
    //     list.forEach(x => {
    //         if (x.id == e) {
    //             console.log('code', x.categoryid);

    //             this.setState({
    //                 thumburl: x.picpath,
    //                 name: x.name,
    //                 code: x.categoryid,
    //                 id: x.id,
    //                 clicknew: !0,
                   
    //             })
    //         }
    //     });
    // }
    del(e,code) {
        this.setState({ delid: e,delcode: code})
        $('#myModal').modal('toggle');
    }

    confirmdel() {
        let {delid,delcode,categoryid} = this.state;
        aodsubcategory({ id:delid,code:delcode }, res => {
            if (res.issuccess == 1) {
                $('#myModal').modal('toggle');
                alert('删除成功')
                this.setState({
                    clicknew: !1,
                    name: '',
                    thumburl: ''
                })
                this.freshlist(categoryid);
            }
        })

    }


    render() {
        let { categoryname } = this.state;
        return (

            <div className='content_wrap panel-default content_wrap'>
                <Modal content='确定删除吗？' click={this.confirmdel.bind(this)} />
                <div className='breadLine '>
                    当前位置 > 分类管理
                        </div>
                <div className='inputs panel-body'>
                    <h3>{categoryname} ——二级分类管理</h3>
                    <button onClick={this.add.bind(this)} className='btn add btn-primary center' >新建二级分类</button>
                    <div style={{ display: this.state.clicknew ? "" : "none" }}>
                        <div className="input-group input-group">
                            <span className="input-group-addon ">分类名称</span>
                            <input id='name' onChange={this.inputchange.bind(this)} type="text" value={this.state.name} placeholder='请输入分类名称' className="form-control " />
                        </div>
                        <div className="input-group input-group">
                            <span className="input-group-addon ">分类编码</span>
                            <input id='code' onChange={this.inputcode.bind(this)} type="text" value={this.state.code} placeholder='请输入分类编码' className="form-control " />
                        </div>
                       
                        <div className="input-group input-group ">
                            <span className="input-group-addon desc">上传分类图片</span>
                            <input onChange={this.filechange.bind(this)} type='file' id='file' />
                            <div className='img_warp' >
                                <img className='fileimg' src={Constant.UPLOADBTN} onClick={this.clickupload.bind(this, 0)} style={{ display: this.state.thumburl.length > 0 ? "none" : "" }} />
                                <img style={{ display: this.state.thumburl.length > 0 ? "block" : "none" }} src={this.state.thumburl} className="img-responsive" />
                                <img className='closeimg thumb' style={{ display: this.state.thumburl.length > 0 ? "block" : "none" }} onClick={this.del_detail_img.bind(this, -1)} src='./src/img_close.png' />
                            </div>


                        </div>
                        <button style={{ marginLeft: '122px' }} onClick={this.upload.bind(this)} className={`btn submit btn-${this.state.finishupload ? "success" : "primary"} center `} >{this.state.finishupload ? "上传成功" : "上传"}</button>
                        <button onClick={this.submit.bind(this)} className='btn submit btn-primary center ' >确定添加</button>
                    </div>

                    <table className="table table-hover">
                        <thead>
                            <tr>
                                <th>分类名称</th>
                                <th>图片</th>
                                <th>分类编码</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            {this.state.listhtml}
                        </tbody>
                    </table>

                </div>
            </div>
        )
    }
}





ReactDOM.render(
    <div>
        <TopLine />
        {/* <LeftMenu code='4' /> */}
        <LeftMenu code='subcategory' />
        <SubCategory />
    </div>
    //<Barrage/>
    , $('.container')[0]
)